<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.css" />
		<link type="text/css" rel="stylesheet" href="../css/top_main.css" />
		<link type="text/css" rel="stylesheet" href="../css/footer.css" />
		<link type="text/css" rel="stylesheet" href="../css/kthy.css" />
		<link type="text/css" rel="stylesheet" href="../css/style.css" />
		
		<script type="text/javascript" src="../js/model/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/model/swiper.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js" ></script>
		<script type="text/javascript" src="../js/kthy.js"></script>
		
		<title>优当借书</title>
	
		<script>
			$(function(){
				$("body").css("opacity",1);
			})
			
		</script>
	</head>
	<body style="opacity: 0;">
		
		
		<div class="top">
			<a href="#" class="goback">
				<img src="../images/icons/goback1.png" />
			</a>
			<span>开通会员</span>
		</div>
		<div class="main">
			<div class="navs">
				<a href="#" class="nav1 Btnbutton active">
					<span>在线开通</span>
				</a>
				<a href="#" class="nav2 Btnbutton">
					<span>U码开通</span>
				</a>
			</div>
			<!--订单 主体  开始-->
			<div class="mySwiper">
				<div class="swiper-container" id="swiper-container">
					<div class="swiper-wrapper">
						<!--第1个slide开始-->
						<div class="swiper-slide slide1">
							<form name="myform1" class="myform1" action="#" method="post" onsubmit="return checkform1()">
							<!--items 开始-->
							<div class="items">
								<div class="item_title">
									<div class="item_title_img">
										<img src="../images/me/item_title_img.png" />
										
									</div>
									<span>智阅卡</span>
								</div>
								<div class="item_text">
									1>.基础会员，新卡用户，办卡即有5个积分，   
									2>.中级会员，积分满80，即升级为中级会员   
									3>.高级会员，积分满180，即升级为高级会员   
									4>.金牌会员，积分满280，即升级为金牌会员 
								</div>
								<div class="item_card item_card1 active">
									一年<span class="price">398</span >元<span class="yajin">( 含30元押金 )</span>
								</div>
								<div class="item_card item_card1" >
									二年<span class="price">698</span >元<span class="yajin">( 含30元押金 )</span>
								</div>
							</div>
							<!--items 结束-->
							
							<!--items 开始-->
							<div class="items">
								<div class="item_title">
									<div class="item_title_img">
										<img src="../images/me/item_title_img.png" />
										
									</div>
									<span>视娱卡</span>
								</div>
								<div class="item_text">
									1>.基础会员，新卡用户，办卡即有5个积分，   
									2>.中级会员，积分满80，即升级为中级会员   
									3>.高级会员，积分满180，即升级为高级会员   
									4>.金牌会员，积分满280，即升级为金牌会员 
								</div>
								<div class="item_card item_card2 active">
									一年<span class="price">198</span>元<span class="yajin">( 含30元押金 )</span>
								</div>
								<div class="item_card item_card2">
									二年<span class="price">258</span>元<span class="yajin">( 含30元押金 )</span>
								</div>
							</div>
							<!--items 结束-->
							
							<!--推荐人 开始-->
							<div class="tjr">
								<div>推荐人手机号<span class="xuantian">( 选填 )</span></div>
								<input type='text' class="tjr_tel"  name="" onkeyup="value=value.replace(/[^\d]/g,'')" 
									ng-pattern="/[^a-zA-Z]" maxLength="15" >
							</div>
							<!--推荐人 结束-->
							
							<!--支付方式  开始-->
							<div class="paytype">
								<span class="zffs">支付方式</span>
								<span class="wxzf">微信支付</span>
								<img src="../images/me/weixin.png" class="weixinPic" />
							</div>
							<!--支付方式  结束-->
							
							<!--支付按钮 开始-->
							<div class="kaitong">
								<input type="button" class="zxkt" name="zxkt"value="确认开通"  />
							</div>
							<!--支付按钮结束-->
							<div class="xieyi xieyi1">
								<div class="xieyiPic"></div>
								<span>我已阅读并同意</span><a>《优当借书网支付协议》</a>
							</div>
							<!--会员须知  开始-->
							<div class="my_bottom">
								<div class="my_bottom_tit">
									<div class="my_bottom_tit_inner m_flex_box flex_hc">
										<div class="m_flex_box">
											<img src="../images/vip.png">
											<span>会员开通须知</span>
										</div>
									</div>
								</div>
								<div class="my_know">
									<div class="my_know_con">
										
									</div>
								</div>
							</div>
							<!--会员须知 结束-->
							</form>
						</div>
						<!--第1个slide 结束-->
						
						<!--第2个slide开始-->
						<div class="swiper-slide slide2">
							<form name="myform2" class="myform2" action="#" method="post" onsubmit="return checkform2()">
							<input input="text" placeholder="请输入12位U码"  class="u_kt" maxlength="12"/>
							<!--支付按钮 开始-->
							<div class="kaitong">
								<input type="button" class="umkt" name="umkt" value="确认开通"  />
							</div>
							<!--支付按钮 结束-->
							<div class="xieyi xieyi2 active">
								<div class="xieyiPic"></div>
								<span>我已阅读并同意</span><a>《优当借书网支付协议》</a>
							</div>
							<!--会员须知  开始-->
							<div class="my_bottom">
								<div class="my_bottom_tit">
									<div class="my_bottom_tit_inner m_flex_box flex_hc">
										<div class="m_flex_box">
											<img src="../images/vip.png">
											<span>会员开通须知</span>
										</div>
									</div>
								</div>
								<div class="my_know">
									<ul>
										<li>和骚奋斗过水电费水电费</li>
										<li>和骚奋斗过水电费水电费</li>
										<li>和骚奋斗过水电费水电费</li>
									</ul>
								</div>
							</div>
							<!--会员须知 结束-->
							</form>
						</div>
						<!--2个slide 结束-->
					</div>
				</div>
			</div>
		</div>
		<script>
		$(function(){
			var spage=1;
			setTimeout(function(){
				
				var mySwiper = new Swiper('#swiper-container',{
							autoHeight:true,
						    speed:0,
						    lazyLoading: true,
						   	hashnav:true,
							hashnavWatchState:true,
						    onSlideChangeStart: function(swiper){
						    	$(".navs a").removeClass('active');
						      	$(".navs a").eq(mySwiper.activeIndex).addClass('active');
						      
						      	spage=mySwiper.activeIndex*1+1;
						      	console.log("现在是第"+spage+"页");console.log("spage"+spage);
								$(".main").scrollTop(0);
						     
						     }
						    
						  })
				
						$(".navs .Btnbutton").on('touchstart mousedown',function(e){
							e.preventDefault();
							$(".navs .Btnbutton").removeClass('active');
							$(this).addClass('active');
							mySwiper.slideTo($(this).index());
							spage=$(this).index()+1;console.log(spage);
							
							 document.body.scrollTop = document.documentElement.scrollTop = 0;
						})   
						
						$(".navs .Btnbutton").click(function(e){
						    e.preventDefault();
						    e.stopPropagation();
						    mySwiper.slideTo($(this).index());
						   spage=$(this).index()+1;console.log(spage);
						   
						})
			},200)
			
		})
		</script>
		<script>
			var a = document.getElementsByTagName('a');
			for(var i = 0; i < a.length; i++)
			{
				a[i].addEventListener('touchstart',function(){},false);
			}
		</script>
	</body>
</html>
